0
162
ViewsReaccionar input[type="range"] con etiquetas de marca personalizadas
Tengo el siguiente componente React:
// Datalist for custom tick mark display const datalistId = `slider-datalist-${uniqueId()}`; const datalistItems = []; for (let i=min; i<=max; i += stepSize) { if (labelRenderer) { datalistItems.push(<option key={i} value={i} label={labelRenderer(i)} />) } else { datalistItems.push(<option key={i} value={i} label={i} />) } } return ( <div> <input type="range" id={id} value={value} min={min} max={max} step={stepSize} onChange={handleChange} list={datalistId} /> <datalist id={datalistId}> {datalistItems} </datalist> </div> ); Las cosas funcionan bien con labelRenderer cuando se proporciona un valor básico (es decir, una cadena o un número):
<Slider min={1} max={10} stepSize={1} labelRenderer={v => { return `**${v}**`; }} /> 
Pero las cosas explotan cuando trato de hacer que renderice React JSX:
<Slider min={1} max={10} stepSize={1} labelRenderer={v => { return (<span style={{ color: '#f00;' }}>{v}</span>); }} /> 
¿Alguien sabe por qué? Hubiera esperado que React manejara bien la salida aquí.
2 answers
Answer question0
El atributo de etiqueta convierte todo como una cadena. Entonces, debe encontrar otra forma de representar los diferentes elementos, si solo necesita cambiar el estilo, creo que con los nombres correctos (como usar data-color="#f00", por ejemplo) puede hacerlo solo desde CSS .
0
Está intentando pasar un objeto JSX a un atributo de una etiqueta HTML (opción). Aquí, he usado la entrada en lugar de la etiqueta de opción para aclarar qué sucede exactamente. Incluso si pasa JSX como este <option>{JSX here!}</option> no trabajaré porque <option> no admite ninguna etiqueta anidada.
const ChildComponent = function({callBack}) { let aNumber = 10; let theList = [<input value={callBack(aNumber)}/>, <div>{callBack(aNumber)} fixed</div>]; return (<div>{theList}</div>); } export default function App() { return ( <div className="App"> <ChildComponent callBack={num => { //return `${num}`; // Converted to String return (<span>{num}</span>); // Return Object }} /> </div> ); }https://codesandbox.io/s/blissful-jackson-k6bjt1?file=/src/App.js:24-469